<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline" ref="queryForm">
                <el-form-item label="功能" prop="purpose" >
                <el-input placeholder="搜索条件" v-model="searchInfo.purpose" clearable></el-input>
                </el-form-item>
                <el-form-item label="用户" prop="basic_user" >
                    <el-input placeholder="搜索条件" v-model="searchInfo.basic_user" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                            class="filter-item"
                            type="primary"
                            icon="el-icon-search"
                            @click="handleQuery"
                    >搜索</el-button>
                </el-form-item>
            </el-form>
            <el-form>
                <el-form-item>
                    <el-button
                            class="filter-item"
                            type="primary"
                            icon="el-icon-plus"
                            size="mini"
                            @click="createDept()"
                    >新增配置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table
                :data="tableData"
                row-key="ID"
                default-expand-all
                border
                style="width: 100%">
        >
            <el-table-column label="ID" width="50" prop="ID">
                <template slot-scope="scope">{{scope.row.ID}}</template>
            </el-table-column>
            <el-table-column prop="basic_user" label="用户"  />
            <el-table-column prop="basic_passwd" label="密码" />
            <el-table-column prop="purpose" label="功能" />
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">{{scope.row.status|formatString}}</template>
            </el-table-column>
            <el-table-column label="备注" prop="remark" ></el-table-column>
            <el-table-column label="创建日期" align="center" prop="createdAt" width="200">
                <template slot-scope="scope">
                    <span>{{ scope.row.CreatedAt| formatDate}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
                <template slot-scope="scope">
                    <el-button
                            @click="updateDept(scope.row)"
                            size="small"
                            type="primary"
                            icon="el-icon-edit"
                    >编辑</el-button>
                    <el-button @click="deleteDept(scope.row)" type="danger" icon="el-icon-delete" style="margin-left: 6px;" size="mini" >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                :current-page="page"
                :page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                :style="{float:'right',padding:'20px'}"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
        <el-dialog :before-close="closeDialog" :title="dialogTitle" :visible.sync="dialogFormVisible" width="600px">
            <el-form :model="formData" :rules="rules" size="medium" label-width="110px" ref="basicForm" >
                <el-form-item label="用户" prop="basic_user">
                    <el-input  v-model="formData.basic_user" placeholder="请输入用户名" :style="{width: '90%'}"></el-input>
                </el-form-item>
                <el-form-item label="ssh连接类型" prop="sshType" >
                    <el-radio-group v-model="formData.sshType">
                        <el-radio
                                v-for="dict in sshTypeOptions"
                                :key="dict.item_value"
                                :label="dict.item_value "
                        >{{ dict.item_name }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="密码" prop="basic_passwd" v-if="formData.sshType == 'password'">
                    <el-input  v-model="formData.basic_passwd"  placeholder="请输入密码" :style="{width: '90%'}"></el-input>
                </el-form-item>
                <el-form-item label="密钥" prop="sshKey" v-if="formData.sshType == 'key'">
                    <el-input  v-model="formData.sshKey"  placeholder="请输入密钥" :style="{width: '90%'}" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="用途" prop="purpose">
                    <el-select @change="selectPurposeChange" placeholder="请选择" v-model="formData.purpose" style="width:90%">
                        <el-option
                                v-for="dict in purposeOptions"
                                :key="dict.item_value"
                                :label="dict.item_name"
                                :value="dict.item_value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="代理IP" prop="proxy_host" v-if="formData.purpose == 'saic_proxy' || formData.purpose == 'aws_proxy' ">
                    <el-input  v-model="formData.proxy_host"  placeholder="请输入代理IP" :style="{width: '90%'}"></el-input>
                </el-form-item>
                <el-form-item label="代理端口" prop="proxy_port" v-if="formData.purpose == 'saic_proxy'|| formData.purpose == 'aws_proxy'">
                    <el-input  v-model="formData.proxy_port"  placeholder="请输入代理端口" :style="{width: '90%'}"></el-input>
                </el-form-item>
                <el-form-item label="服务器IP" prop="proxy_host" v-if="formData.purpose == 'ansible'">
                    <el-input  v-model="formData.proxy_host"  placeholder="请输入Ansible服务器IP" :style="{width: '90%'}"></el-input>
                </el-form-item>
                <el-form-item label="服务器端口" prop="proxy_port" v-if="formData.purpose == 'ansible'">
                    <el-input  v-model="formData.proxy_port"  placeholder="请输入Ansible服务器端口" :style="{width: '90%'}"></el-input>
                </el-form-item>
                <el-form-item label="机房" prop="server_idc" v-if="formData.purpose == 'jenkins'||formData.purpose == 'ansible'" >
                    <el-select  placeholder="请选择" v-model="formData.server_idc" style="width:90%">
                        <el-option
                                v-for="dict in IdcOptions"
                                :key="dict.item_value"
                                :label="dict.item_name"
                                :value="dict.item_value"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="访问地址" prop="base_url" v-if="formData.purpose == 'gitlab' || formData.purpose == 'jenkins'">
                    <el-input  v-model="formData.base_url"  placeholder="请输入url" :style="{width: '90%'}"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status" >
                    <el-radio-group v-model="formData.status">
                        <el-radio
                                v-for="dict in statusOptions"
                                :key="dict.item_value"
                                :label="dict.item_value |formatBoolean"
                        >{{ dict.item_name }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input autocomplete="off" v-model="formData.remark" placeholder="请输入备注"  type="textarea" :style="{width: '90%'}"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button @click="enterDialog" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>



<script>
    import {
        deleteBasicConfigure,
        updateBasicConfigure,
        getBasicConfigureList,
        createBasicConfigure
    } from "@/api/sys_basic_configure";

    import { formatTimeToStr } from '@/utils/date'
    import infoList from '@/mixins/infoList'
    export default {
        name: "basicConfigure",
        mixins: [infoList],
        data() {
            return {
                listApi: getBasicConfigureList,
                dialogFormVisible: false,
                dialogTitle: '新增部门',
                sshTypeOptions:[],
                statusOptions:[],
                IdcOptions:[],
                purposeOptions:[],
                selectPurpose:"os_root",
                type: '',   // 弹出dialog框类型 add/edit
                searchInfo: {
                    status: undefined
                },
                formData: {
                    id: 0,   // 部门id primarykey
                    basic_user: undefined,
                    sshType:'password',
                    basic_passwd: undefined,
                    sshKey: undefined,
                    purpose:undefined,
                    server_idc:undefined,
                    base_url:undefined,
                    status: true,
                    proxy_host:undefined,
                    proxy_port:undefined,
                    remark: '' // 描述信息
                },
                rules: {
                    basic_user: [{ required: true, message: "请输入用户名", trigger: "blur" }],
                    sshType: [{ required: true, message: "请选择类型", trigger: "blur" }],
                    remark: [
                        { required: true, message: "请输入备注信息", trigger: "blur" }
                    ],
                },


            }
        },
        methods: {
            handleQuery() {
                if (this.searchInfo.status==""){
                    this.searchInfo.status=null
                }
                this.getTableData()
            },
            selectPurposeChange(val){
                this.selectPurpose = val
                this.formData.purpose = val
            },
            handleClose(done) {
                // this.initForm();
                done();
            },
            async updateDept(row) {
                this.type = "update";
                // this.formData = row;
                // 赋值时，赋值对象的属性原先没有，后加的属性无法刷新
                this.formData = Object.assign({},row)
                this.dialogFormVisible = true;
                this.dialogTitle = '编辑配置';


            },
            async createDept(){
                this.dialogTitle = '新增配置'
                this.type = 'create';
                this.dialogFormVisible = true;
                // 解决缓存  赋值时，赋值对象的属性原先没有，后加的属性无法刷新
                this.formData = Object.assign({},this.formData)

            },

            closeDialog() {
                this.$refs['basicForm'].resetFields()
                this.dialogFormVisible = false;
            },
            // 删除角色
            deleteDept(row) {
                this.$confirm("此操作将永久删除这条配置记录, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(async () => {
                        this.visible = false;
                        const res = await deleteBasicConfigure({ ID: row.ID });
                        if (res.code == 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            await  this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },
            async enterDialog() {
                this.$refs['basicForm'].validate(async valid => {
                    if (!valid) return
                    let res;
                    switch (this.type) {
                        case "create":
                            res = await createBasicConfigure(this.formData);
                            break;
                        case "update":
                            res = await updateBasicConfigure(this.formData);
                            break;
                        default:
                            res = await createBasicConfigure(this.formData);
                            break;
                    }
                    if (res.code == 0) {
                        this.closeDialog();
                        await this.getTableData();
                    }
                })
            },
        },
        filters: {
            formatDate: function(time) {
                if (time != null && time != '') {
                    let date = new Date(time)
                    return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
                } else {
                    return ''
                }
            },
            formatString: function(bool) {
                if (bool != null) {
                    return bool ? "正常" :"关闭";
                } else {
                    return "";
                }
            },
            formatBoolean: function(s) {
                if (s == "1" ) {
                    return true
                } else {
                    return false;
                }
            }
        },
        async created() {
            await this.getTableData();
            this.statusOptions = this.getDicItemList('sys_common_status')
            this.purposeOptions = this.getDicItemList('tool-usage')
            this.IdcOptions = this.getDicItemList('server_idc')
            this.sshTypeOptions = this.getDicItemList('ssh_connect_type')
        }
    }
</script>

<style scoped lang="scss" >

    .warning {
        color: #dc143c;
    }

</style>
